<template>
    <div class="wx_set">
        <div class="content">
            <div class="div_box float-left">
                <div class="title">微信授权</div>
                <div class="img-box img_wx_logo_d" :class="{'img_wx_logo_active':wxAward}"></div>
                <div class="state"  v-text="wxAward?'已授权':'未授权'"></div>
                <div class="sub-btn">
                    <el-button type="danger" v-text="wxAward?'重新授权':'授权'"  @click="dialogBox(1) "></el-button>
                </div>
                <div class="text-info">授权公众号后才可支持活动在微信端发布参与，授权后，用于授权的公众号将无法与其他三方应用平台对接</div>
            </div>
            <div class="div_box float-left">
                <div class="title">微信支付授权</div>
                <div class="img-box img_wx_pay_d" :class="{'img_wx_pay_active':wxPayAward}"></div>
                <div class="state" v-text="wxPayAward?'已授权':'未授权'"></div>
                <div class="sub-btn">
                    <el-button type="danger"  :disabled="!wxAward" v-text="wxPayAward?'重新授权':'授权'" @click="dialogBox(2) "></el-button>
                </div>
                <div class="text-info">开通微信支付功能</div>
            </div>
        </div>
		 <!-- 绑定appid -->
        <el-dialog
            title="微信授权"
            :visible.sync="wxAppidDialog"
            size="tiny">
            <div class="dialog-title ">授权绑定：</div>
                <el-input class="element-input" placeholder="请输入APP_ID" v-model="wxForm.app_id">
                    <template slot="prepend" class="prepend">APP_ID</template>
                </el-input>
                <el-input class="element-input" placeholder="请输入SecretkeyKey" v-model="wxForm.app_secret">
                    <template slot="prepend" class="prepend">SecurityKey</template>
                </el-input>
    
            <span slot="footer" class="dialog-footer">
                <el-button @click="wxAppidDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 微信支付授权 -->
        <el-dialog
            title="微信支付授权"
            :visible.sync="wxPayDialog"
            size="tiny">
            <div class="dialog-title ">授权绑定：</div>
                <el-input class="element-input" placeholder="商户账户" v-model="wxPayForm.merchant_id">
                    <template slot="prepend" class="prepend">商户账户</template>
                </el-input>
                <el-input class="element-input" placeholder="商户密钥" v-model="wxPayForm.key">
                    <template slot="prepend" class="prepend">商户密钥</template>
                </el-input>
                <el-input class="element-input" disabled placeholder="支付证书" v-model="wxPayForm.cert_path">
                    <template slot="prepend" class="prepend">支付证书</template>
                    <label id="file" slot="append" class="file-label cursor">
                        <input type="file" name="file" @change='addFilePay' ref="couponFile" class="up-file-input"/> 
                        <el-button >上传证书</el-button>
                    </label>
                    
                </el-input>
                <el-input class="element-input" disabled placeholder="证书密钥" v-model="wxPayForm.key_path">
                    <template slot="prepend" class="prepend">证书密钥</template>
                    <label id="file" slot="append" class="file-label cursor">
                        <input type="file" name="file" @change='addFileKey' ref="couponFile" class="up-file-input"/> 
                        <el-button >上传证书</el-button>
                    </label>
                </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="wxPayDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	import * as api from './../../api/api';
export default {
    data(){
        return {
            wxAward:false,   //微信授权
            wxPayAward:false, //微信支付授权
            wxAppidDialog:false, //微信授权弹出框
            // 微信授权
            wxForm:{
                app_id:'',
                app_secret:''
            },
            wxPayDialog:false, //微信授权弹出框
            // 微信授权
            wxPayForm:{
                merchant_id:'', //商户号
                key:'',  //秘钥key
                cert_path:"",//证书路径
                key_path:'', //秘钥路径
                type:'pay'
            },
            dialogClickIndex:0,   //当前点击的弹出框
        }
    },
    mounted(){
        this.checkdWechat();
    },
    computed: {

    },
    methods: {
        checkdWechat(){
            let vm = this;
            api.isWechatId().then(res=>{
                if(res.data.data==[]||res.data.data=={}){
                    vm.wxAward=false;
                    vm.wxPayAward=false;
                }else{
                    vm.wxForm={
                        app_id:res.data.data.app_id,
                        app_secret:res.data.data.app_secret
                    };
                    let cert_path=res.data.data.cert_path.split('/');
                    let key_path=res.data.data.key_path.split('/');
                    vm.wxPayForm={
                        merchant_id:res.data.data.merchant_id, //商户号
                        key:res.data.data.key,  //秘钥key
                        cert_path:cert_path[cert_path.length-1],//证书路径
                        key_path:key_path[key_path.length-1], //秘钥路径
                        type:'pay'
                    },
                    res.data.data.app_id==''?vm.wxAward=false:vm.wxAward=true;
                    res.data.data.merchant_id==0?vm.wxPayAward=false:vm.wxPayAward=true;
                }
            }).catch(err=>{
                vm.httpStatusCode(err);
            });
        },
        handleClose() {
            let vm = this;
            let body;
            if(vm.dialogClickIndex==1){
                body=vm.wxForm;
            }else{
                body=vm.wxPayForm;
            }
            api.postWxAppId(body).then(res=>{
                if(res.data.code==200){
                    this.$message({ message: '授权成功', type: 'success' });
                    vm.wxAppidDialog = false;
                    vm.wxPayDialog = false;
                }
            }).catch(err=>{
                vm.httpStatusCode(err);
            })  
        },
        dialogBox(val){
            this.dialogClickIndex=val;
            if(val==1){                
                this.wxAppidDialog = true;
            }else{
                this.wxPayDialog = true;
            }
        },
        //支付证书
        addFilePay(e){
            let vm = this;
            let ext=e.target.value.toLowerCase().split('.').splice(-1);
            let form = new FormData();  
            form.append('file', e.target.files[0]);
            api.postUpload(form).then(res=>{
                if(res.data.code==200){
                    vm.wxPayForm.cert_path=res.data.data;	
                    vm.$message({ message: '上传成功', type: 'success' });
                }
            });	
            event.target.value='';
        },
        //证书密钥
        addFileKey(e){
            let vm = this;
            let ext=e.target.value.toLowerCase().split('.').splice(-1);
            let form = new FormData();  
            form.append('file', e.target.files[0]);
            api.postUpload(form).then(res=>{
                if(res.data.code==200){
                    vm.wxPayForm.key_path=res.data.data;	
                    vm.$message({ message: '上传成功', type: 'success' });
                }
            });	
            event.target.value='';
        },
    }
    
}
</script>

<style lang="less" scoped>
.wx_set{
    width:100%;
    height:100%;
    background:#fff;
    text-align:center;
    padding-top:10%;
    box-sizing:border-box;
    .content{
        width:745px;
        margin:auto;
         .div_box{
            width:300px;
            height:350px;
            display:inline-block;
            border:1px solid #ddd;
            &:last-child{
                margin-left:40px;
            }
            .title{
                width: 100%;
                height: 50px;
                line-height: 50px;
                background-color: #eee;
                font-size: 14px;
                text-align: center;
                font-weight: 500;
                color: #101010;
            }
            .img-box{
                width:60px;
                height:60px;
                margin:30px auto 20px;
                
            }
            .img_wx_logo_d{
                background:url('./../../assets/img/wx_logo_d.png') no-repeat;
                background-size:contain;
            }
            .img_wx_pay_d{
                background:url('./../../assets/img/wx_pay_d.png') no-repeat;
                background-size:contain;
            }
            .img_wx_logo_active{
                background:url('./../../assets/img/wx_logo.png') no-repeat;
                background-size:contain;
            }
            .img_wx_pay_active{
                background:url('./../../assets/img/wx_pay.png') no-repeat;
                background-size:contain;
            }
            .state{
                font-weight:bold;
            }
            .sub-btn{
                
                margin:20px auto;
                .el-button{
                   width:88px; 
                }
            }
            .text-info{
                padding:0 15px; 
                color:#666;
                font-size:13px;
            }
        }
    }
    .dialog-title{
        text-align:left;
        font-weight:bold;
    }
    .element-input{
        margin-top:10px ; 
    }
    .file-label{
        display: inline-block;
        // height:30px;
        // width:88px;
        padding: 10px 0;
        position: relative;
    }
    .up-file-input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
}
</style>
